<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>EIC Dashboard</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<link rel="icon" href="../favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
        <script src="../js/utils.js"></script>
        <script src="../js/const.js"></script>
	</head>
	<body>
        <div class="container-fluid">
            <nav class="navbar-expand-lg border-0 row" id="nav">
				<div class="col-md-4 text-left" id="title">Edge Intelligence Computing Dashboard</div>
				<div class="col-md-8"></div>
            </nav>
            <div class="contents" style="visibility: hidden">
                <div class="main row">
                    <div class="col-md-6" id="comnet-body">
                        <div class="chart cardino" id="comnet"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="row cardino" id="live-body">
                            <div class="col-md-5">
                                <div id="live">
                                    <div class="live-img">
                                        <img alt="input snapshot" src="https://cdn.jsdelivr.net/gh/AmaneHayashi/PictureBed/whom.jpg" id="snapshot"/>
                                    </div>
                                    <div class="live-info">
                                        <div class="task-info-title"><b>[TASK INFO]</b>
                                            <span class="badge badge-success" id="task-coming-flag" hidden>COMPLETE!</span>
                                        </div>
                                        <div class="task-info-subtitle">&lt;Timestamp&gt;
                                            <div class="task-info">Arrive: <span id="task-arrive-time"></span></div>
                                            <div class="task-info">Finish: <span id="task-finish-time"></span></div>
                                            <div class="task-info">Duration: <span id="task-duration"></span></div>
                                            <div class="task-info">Deadline: <span id="task-deadline"></span></div>
                                            <div class="task-info">Efficiency: <span id="task-efficiency"></span></div>
                                        </div>
                                        <div class="task-info-subtitle">&lt;Execution&gt;
                                            <div class="task-info">ID: <span id="task-id"></span></div>
                                            <div class="task-info">Pairs: <span id="task-pairs"></span></div>
                                            <div class="task-info">Type: <span id="task-type"></span></div>
                                            <div class="task-info task-result">Result: <span id="task-result"></span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-7" id="tables">
                                <table class="table table-striped table-hover text-nowrap" id="taskflow">
                                    <thead>
                                        <tr>
                                            <th>Index</th>
                                            <th>Type</th>
                                            <th>Pairs</th>
                                            <th>Evaluation</th>
                                            <th>Result</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                  </table>
                            </div>
                        </div>
                        <div class="row cardino" id="netdynamic-body">
                            <div class="col-md-6">
                                <div class="chart" name="netdynamic" id="netdynamic1"></div>
                            </div>
                            <div class="col-md-6">
                                <div class="chart" name="netdynamic" id="netdynamic2"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="stat row" id="task-body">
                    <div class="col-md-5">
                        <div class="row cardino">
                            <div class="col-md-6">
                                <div class="chart" name="else" id="taskdynamic1"></div>
                            </div>
                            <div class="col-md-6">
                                <div class="chart" name="else" id="taskdynamic2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="row cardino">
                            <div class="col-md-6">
                                <div class="chart" name="else" id="taskstat1"></div>
                            </div>
                            <div class="col-md-6">
                                <div class="chart" name="else" id="taskstat2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="chart cardino" name="else" id="taskstat1"></div>
                    </div>
                </div>
            </div>
        </div>
	</body>
    <script src="../js/echart.js"></script>
    <script src="../js/demo.js"></script>
	<script src="../js/main.js"></script>
</html>